<template>
  <div class="two_house">
    <div>
      <!--<div class="nav_bar">-->
        <house-title :formData="formData" :searchId="searchId" :title="title"></house-title>

      <div  :class="{list_content_fixed:listContentFixed === true}">
        <screening-hurdles :getBuildList="getHouseList" :buildSel="buildSel" :formData="formData"></screening-hurdles>
      </div>
      <div>
        <!--<list-label></list-label>-->
      </div>
      <div class="two_house_content">
        <!--二手房-->
        <list-content v-if="houseListData.data" :houseListData="houseListData.data"></list-content>
        <div class="none_house_build" v-show="houseListData.total === 0">抱歉，暂无数据</div>
        <!--二手房-->
      </div>
      <div v-if="houseListData.last_page !== 0">
        <div class="btnLoadMore" v-if="formData.page !== houseListData.last_page" @click="loadMore">
          点击加载更多
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {Navbar, TabItem} from 'mint-ui';
  import ListLabel from '../../components/house/ListLabel';
  import ListContent from '../../components/listComponents/ListContent';
  import ScreeningHurdles from '../../components/house/ScreeningHurdles';
  import HouseTitle from '../../components/house/HouseTitle';
  import {houseSelectData,houseList} from '../../axios/api';
  import {getCityName} from '../../assets/js/cache';

  Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);
  export default {
    name: 'TwoHouse',
    data() {
      return {
        title:'二手房',
        searchId:3,
        listContentFixed:false,
        // pushName:'HouseDetails',
        buildSel:{},
        formData:{
          page:1,
          city_code:getCityName().CODE,
          price_min:'',//售价区间 小
          price_max:'',//售价区间 大
          type_id:'',//房源类型
          ht_room_num:'',//房型 几室
          building_year_min:'',//建房年代 小
          building_year_max:'',//建房年代 大
          orientation_id:'',//房源朝向
          floor_id_min:'',//楼层位置区间 小
          floor_id_max:'',//楼层位置区间 大
          floor_id_dc:'',//只要顶层楼层(传了这个楼层区间就不要了)
          area_code:'',
          developer:'',//开发商
        },
        houseListData:{},
      }
    },
    watch: {
      $route(to, from) {
        if (from.name === 'Index') {
          this.getHouseSelectData();
          this.getHouseList();
        }
      }
    },
    computed:{
      getHouseArea(){
        return this.$store.getters.getHouseArea;
      },
      getHousePayMin(){
        return this.$store.getters.getHousePayMin;
      },
      getHousePayMax(){
        return this.$store.getters.getHousePayMax;
      },
      getHouseType(){
        return this.$store.getters.getHouseType;
      },
      getHouseDevelopers(){
        return this.$store.getters.getHouseDevelopers;
      },
    },
    created(){
      this.getHouseSelectData();
    },
    methods: {
      //点击加载更多
      loadMore(){
        this.formData.page += 1;
        houseList(this.formData).then(res=>{
          this.houseListData.data = [...this.houseListData.data, ...res.data.data];
        }).catch(err=>{
          console.log(err);
        })
      },
      //获取房源下拉选择数据
      getHouseSelectData(){
        this.formData.area_code = this.getHouseArea;
        this.formData.price_min = this.getHousePayMin;
        this.formData.price_max = this.getHousePayMax;
        this.formData.type_id = this.getHouseType;
        this.formData.developer = this.getHouseDevelopers;
        this.getHouseList();
        houseSelectData(this.formData.city_code).then(res=>{
          this.buildSel=res.data;
        }).catch(err=>{
          console.log(err);
        })
      },
      //快捷找房

      // 获取列表
      getHouseList(){
        let that = this;
        that.formData.page = 1;
        this.formData.city_code = getCityName().CODE;
        houseList(this.formData).then(res=>{
          console.log(res);
          that.houseListData = res.data;
        }).catch(err=>{
          console.log(err);
        })
      },
      handleScroll () {
        // let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let scrollTop = window.pageYOffset;
        // console.log(scrollTop);
        // let offsetTop = document.getElementsByTagName('.two_house_content').offsetTop;
        if(scrollTop > 50) {
          this.listContentFixed = true
        } else {
          this.listContentFixed = false
        }
      }
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },
    components: {
      ScreeningHurdles,
      ListLabel,
      ListContent,
      HouseTitle
    }
  }
</script>

<style scoped>
  .two_house .nav_bar {
    display: flex;
    background-color: #e6191e;
    height: 30px;
    padding: 10px;
    line-height: 30px;
    justify-content: space-between;
    color: #ffffff;
  }

  .two_house .nav_bar > div .icon-icon4 {
    margin-right: 10px;
  }

  .nav_bar div:nth-child(2) {
    /*width: 70%;*/
  }

  .two_house .nav_bar .mint-navbar .mint-tab-item {
    padding: 7px 0;
    margin: 0 10px;
  }

  .two_house .nav_bar .mint-navbar {
    background-color: #e6191e;
  }
  .two_house .nav_bar>div:nth-child(2){
  min-width: 60%;
  /*width: 50%;*/
}
  .two_house .nav_bar .mint-navbar .mint-tab-item.is-selected {
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
  }

  .two_house .nav_bar > div .icon-sousuo {
    margin-right: 10px;
  }
  /*.two_house .two_house_content{*/
      /*height: 50px;*/
  /*}*/
  .two_house .list_content_fixed{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    background-color: #e6191e;
    width: 100%;
  }
</style>
